<template>
  <div class="components-container">
    <div class="header-form">
       <div class="layui-inline">
          <label  class="layui-form-label">登记状态</label>
          <div class="layui-inline" style="margin-top:-6px">
            <el-radio-group v-model="selectDataEixend.JpmStatusEquals" @change="getData">
              <el-radio-button  :label="IchValue" class="radio">已火化</el-radio-button>
              <el-radio-button  :label="UnIchValue" class="radio">已注销</el-radio-button>
            </el-radio-group>
            </div>
       </div>
        <div class="layui-inline">
          <label class="layui-form-label">逝者姓名</label>
            <div class="layui-inline">
              <el-input  v-model="selectDataEixend.JpmNameEquals" placeholder="请输入逝者姓名"></el-input>
            </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">业务编号</label>
            <div class="layui-inline">
              <el-input  v-model="selectDataEixend.JpmBussEquals" placeholder="请输入业务编号"></el-input>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" >火化日期</label>
            <el-date-picker v-date v-model="selectDataEixend.CremationdateGreaterAndEquals" type="date" placeholder="选择日期范围" ></el-date-picker>
            <el-date-picker v-date v-model="selectDataEixend.CremationdateLessAndEquals" type="date" placeholder="选择日期范围"></el-date-picker>
        </div>

          <el-button type="primary" @click="getData" :loading="this.$store.state.isloading">搜索</el-button>
          <el-button  @click="btnRepeat" >重置</el-button>
    </div>

    <div>
      <!-- <label class="layui-form-label">配置表头</label> -->
 <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox> 
      <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange" class="aaa">
        <el-checkbox v-for="city in copyheadlist" :label="city.ColumnName" :key="city.ColumnKey">{{city.ColumnName}}</el-checkbox>
      </el-checkbox-group>
    </div>

    
    <div>
      <ul class="toolList">
        <li>
          <el-button type="primary" @click="getData">刷新</el-button>
          <el-button type="primary" :disabled="this.$store.state.isloading" @click="exportExcel">导出Excel</el-button>
        </li>
        <li v-if="btnShow(item.BTNVALUE)" v-for="(item, index) in $store.state.btnListCommon" @click="operate(item.BTNVALUE)" :key="index">
          <el-button type="primary" :value="item.BTNSHOWNAME" v-text="item.BTNSHOWNAME"></el-button>
        </li>
      </ul>
    </div>
    <!-- <dataTable :headList="headList" :dataList="dataList" :pageOrder="pageOrder" @pageChange="pageChange" @selectRow="selectRow"></dataTable> -->
     <el-table border stripe :data="dataList" @sort-change="sortChange" highlight-current-row @current-change="selectRow" style="width: 100%; margin-bottom: 10px" fixed  :max-height="height" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" v-if="showselect"></el-table-column>
      <el-table-column label="操作" width="100" align="center">
        <template slot-scope="scope">
          <!-- <el-button type="text" size="small" @click.native.prevent="operate(item.BTNVALUE,scope.row)" :key="index" v-for="(item, index) in btnList">
            {{ item.BTNSHOWNAME }}
          </el-button> -->
          <el-button type="text" size="small" @click.native.prevent="operate('详情',scope.row)">
            详情
          </el-button>
        </template>
      </el-table-column>
    
      <el-table-column :sortable="item.ColumnOrder==''?false:true" :prop="item.ColumnKey" :label="item.ColumnName" :order="item.ColumnOrder" :align="item.ColumnAlign" :width="item.ColumnWidth" :key="index" v-for="(item,index) in headList">   
        <el-table-column :sortable="item.ColumnOrder==''?false:true" :prop="item.ColumnKey" :label="item.ColumnName" :order="item.ColumnOrder" :align="item.ColumnAlign" :width="item.ColumnWidth" :key="index" v-for="(item,index) in item.ColumnChild">   
        </el-table-column>
      </el-table-column>
    </el-table>
      <!-- 页码 -->
    <div class="block">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageOrder.currentPage"
        :page-size="pageOrder.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageOrder.totalNum" >
      </el-pagination>
    </div>

    <!-- <cresimplereg ref="simpleReg" :orderType="order" @refreshData="getData"></cresimplereg> -->
    <printmodal ref="printPdf"></printmodal>
    <Appendixlists ref="dialog"></Appendixlists>
    <OperationHistory ref="OperationHistory"></OperationHistory>
    <informationRegistrationMain ref="information" @refreshData="getData"></informationRegistrationMain>

    <sweet-modal ref="searchmessage" class="dialog" :sweetModalMaxWidth="pageWidth">
       <fieldset class="layui-elem-field layui-field-title">
          <legend style="font-weight: bold;">公安注销</legend>

          <div class="layui-form-item">
            <div class="layui-inline">
              <label class="layui-form-label">办理日期</label>
              <div class="layui-input-inline backcolor">
                <el-date-picker v-date type="date" v-model="jpmData.JPMCANCELDATE"></el-date-picker>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">单位</label>
              <div class="layui-input-inline backcolor">
                <el-input v-model="jpmData.JPMCANCELUNIT" readonly></el-input>
              </div>
            </div>
            <div class="layui-inline">
              <label class="layui-form-label">人员</label>
              <div class="layui-input-inline backcolor">
                <el-input v-model="jpmData.JPMCANCELUSR" readonly></el-input>
              </div>
            </div>
          </div> 

          <div class="layui-inline-item">
            <div class="layui-inline" style="width:850px;margin-right:0px;">
                <label class="layui-form-label">备注</label>
                <div class="layui-input-inline backcolor">
                  <el-input class="longertexts" :autosize="{ minRows: 2, maxRows: 8}" placeholder="备注" v-model="jpmData.JPMCANCELREMARK"></el-input>
                </div>
            </div>
          </div>
          <div class="layui-form-item btnCenter">
            <el-button id="uploadss" type="primary" :loading="this.$store.state.isloading" @click="Cancellation">注销</el-button>
          </div>
        </fieldset>
  </sweet-modal>
  </div>
 
</template>
<style rel="stylesheet/scss" lang="scss">
@import "src/styles/common.scss";
.el-button + .el-button {
  margin-left: 0;
}
.longtext {
  width: 480px;
}
.longertext {
  width: 770px;
}
.sweet-btn {
  margin-top: 20px;
}
.radio {
  margin-top: 9px;
}
.longertexts {
  width: 770px;
}
.aaa .el-checkbox .el-checkbox__label {
  font-size: 18px;
}
</style>
<script>
import sweetModal from "@/components/sweetModal";
import dataTable from "@/components/Table/DataTable";
import apiBase from "@/api/apiBase.js";
import { ORDER } from "@/const/orderConst.js";
import { DATESELECTMODE } from "@/const/const.js";
import { formatDate, timeStringToDate } from "@/utils/date.js";
import { manage } from "@/mixins/managePage.js";
import { PRINT } from "@/components/Pdf/PDF.js";
import printmodal from "@/components/Pdf/Print";
import informationRegistrationMain from "./informationRegistrationMain";
import Appendixlists from "../jointPlatform/Appendixlists";
import OperationHistory from "./OperationHistory";
const IchValue = "D";
const UnIchValue = "E";
export default {
  name: "informationRegistration",
  mixins: [manage],
  data() {
    return {
      pageWidth: 1000,
      maxHeight: 800,
      showselect: false,
      currentRow: null,
      selectdata: [],
      DateSelectMode: DATESELECTMODE,
      IchValue: IchValue,
      UnIchValue: UnIchValue,
      checked: null,
      checkAll: false,
      isIndeterminate: false,
      selectDataEixend: {
        JpmStatusEquals: null,
        JpmNameEquals: null,
        JpmBussEquals: null,
        CremationdateGreaterAndEquals: null,
        CremationdateLessAndEquals: null
      },
      jpmData: {
        JPMCANCELDATE: null,
        JPMCANCELUNIT: null,
        JPMCANCELUSR: null
      },

      copyheadlist: [],
      checkedCities: [],
      cities: ["上海", "北京", "广州", "深圳"],
      dataAllList: []
    };
  },
  props: {
    height: {
      type: String,
      default: "480"
    }
  },
  methods: {
    //全选

    handleCheckAllChange(val) {
      this.headList = [];
      this.head = [];
      for (var s = 0; s < this.copyheadlist.length; s++) {
        if (val == true) {
          this.head.push(this.copyheadlist[s].ColumnName);
          this.headList.push(this.copyheadlist[s]);
        }
      }
      this.checkedCities = val ? this.head : [];
      this.isIndeterminate = false;
    },

    // handleCheckedCitiesChange(val){
    //     console.log(val)
    //     this.headList = [];
    //     this.copyheadlist.map(item => {
    //         if(val.indexOf(item.ColumnName) > -1) {
    //         this.headList.push(item);
    //     }
    //     })
    // },
    handleCheckedCitiesChange(val) {
      this.headList = [];
      for (var i = 0; i < val.length; i++) {
        for (var s = 0; s < this.copyheadlist.length; s++) {
          if (val[i] === this.copyheadlist[s].ColumnName) {
            this.headList.push(this.copyheadlist[s]);
          }
        }
      }
       let checkedCount = val.length;
        this.checkAll = checkedCount === this.copyheadlist.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.headList.length;
    },
    exportExcel() {
      if (this.dataList.length === 0 || this.headList.length === 0) {
        this.$message.error("无导出数据！");
        return;
      }
      this.downloadLoading = true;
      require.ensure([], () => {
        const { export_json_to_excel } = require("@/vendor/Export2Excel");
        export_json_to_excel(this.headList, this.dataAllList, "数据查询");
        this.downloadLoading = false;
      });
    },

    // console.log(`每页 ${val} 条`);
    handleSizeChange(val) {
      this.pageOrder.pageSize = val;
      this.getData();
    },
    handleCurrentChange(val) {
      this.pageOrder.currentPage = val;
      this.getData();
    },
    selectRow(row) {
      this.currentRow = row;
    },

    getData() {
      let datas = {
        JpmBussEquals: this.selectDataEixend.JpmBussEquals,
        JpmNameEquals: this.selectDataEixend.JpmNameEquals,
        JpmStatusEquals: this.selectDataEixend.JpmStatusEquals
      };
      let Data = JSON.parse(JSON.stringify(this.selectDataEixend));
      datas.CremationdateGreaterAndEquals = formatDate(
        Data.CremationdateGreaterAndEquals,
        "yyyyMMdd"
      );
      datas.CremationdateLessAndEquals = formatDate(
        Data.CremationdateLessAndEquals,
        "yyyyMMdd"
      );
      let data = {
        PageIndex: this.pageOrder.currentPage,
        PageSize: this.pageOrder.pageSize,
        OrderBy: this.pageOrder.orderType,
        OrderByType: this.pageOrder.orderSort,
        Data: datas
      };
      apiBase.DoService(
        data,
        apiBase.getApiAdress().JointRegistration.Query,
        res => {
          this.dataList = res.data.content.OutData;
          this.pageOrder.totalNum = res.data.content.RecordCount;
          this.getAllData();
        }
      );
    },
    getAllData() {
      let datas = {
        JpmBussEquals: this.selectDataEixend.JpmBussEquals,
        JpmNameEquals: this.selectDataEixend.JpmNameEquals,
        JpmStatusEquals: this.selectDataEixend.JpmStatusEquals
      };
      let Data = JSON.parse(JSON.stringify(this.selectDataEixend));
      datas.CremationdateGreaterAndEquals = formatDate(
        Data.CremationdateGreaterAndEquals,
        "yyyyMMdd"
      );
      datas.CremationdateLessAndEquals = formatDate(
        Data.CremationdateLessAndEquals,
        "yyyyMMdd"
      );
      let data = {
        PageIndex: -1,
        PageSize: 0,
        OrderBy: this.pageOrder.orderType,
        OrderByType: this.pageOrder.orderSort,
        Data: datas
      };
      apiBase.DoService(
        data,
        apiBase.getApiAdress().JointRegistration.Query,
        res => {
          this.dataAllList = res.data.content.OutData;
        }
      );
    },
    //获取表头
    getColumns() {
      let data = {};
      apiBase.DoService(
        data,
        apiBase.getApiAdress().Column.GetSjcxColumns,
        res => {
          this.copyheadlist = res.data.content;
           res.data.content.map(item => {
           this.checkedCities.push(item.ColumnName);
           this.headList.push(item);
           })
          
          // this.headList = res.data.content;
        }
      );
    },
    handleSelectionChange(val) {
      this.selectdata = val;
    },
    //排序
    sortChange(a, b, c) {
      for (var i in this.headList) {
        let item = this.headList[i];
        if (item.ColumnKey === a.prop) {
          this.pageOrder.orderType = item.ColumnOrder;
          break;
        }
      }
      if (a.order === "ascending") {
        this.pageOrder.orderSort = "TRUE";
        this.$emit("pageChange", this.pageOrder);
      } else {
        this.pageOrder.orderSort = "FALSE";
        this.$emit("pageChange", this.pageOrder);
      }
    },
    btnShow(btn) {
      //   if (btn === '注销' && this.currentRow) return true;//注销
      if (btn === "附件详情" && this.currentRow) return true; //附件详情
      if (btn === "操作历史" && this.currentRow) return true; //附件详情
      //   if (btn === '批量注销') return true;
      //   if (btn === '取消注销') return true;
    },
    //功能操作
    operate(order, row) {
      this.order = order;
      // this.dataRepeat();
      switch (this.order) {
        case "注销":
          // this.showselect = !this.showselect;
          this.$refs.information.open("注销", this.currentRow.JPMID);
          // setTimeout(() => {
          //   this.getData();
          // },1000)
          break;
        case "批量注销":
          this.showselect = true;
          this.CancellationAll();
          break;
        case "取消注销":
          this.Cancellations();
          break;
        case "附件详情":
          // this.Cancellations();
          this.$refs.dialog.operate("附件上传", this.currentRow.JPMID); //附件详情
          break;
        case "详情":
          this.$refs.information.open("详情", row.JPMID);
          break;
        case "操作历史":
          this.$refs.OperationHistory.open("操作历史", this.currentRow.JPMID);
          break;
        default:
      }
    },
    //取消注销
    Cancellations() {
      this.$confirm("是否取消注销?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(callback => {
        let data = {
          JPMID: this.currentRow.JPMID
        };
        apiBase.DoService(
          data,
          apiBase.getApiAdress().JointRegistration.NCancel,
          res => {
            this.getData();
          }
        );
      });
    },
    //批量注销弹出页面
    CancellationAll() {
      if (this.selectdata.length != 0) {
        this.getbmname();
        this.jpmData.JPMCANCELUSR = localStorage.getItem("username");
        this.$refs.searchmessage.open();
      }
    },
    //批量注销
    Cancellation() {
      let data = JSON.parse(JSON.stringify(this.jpmData));
      if (this.jpmData.JPMCANCELDATE) {
        data.JPMCANCELDATE = formatDate(this.jpmData.JPMCANCELDATE, "yyyyMMdd");
      }
      var dataArray = [];
      for (var i = 0; i < this.selectdata.length; i++) {
        dataArray.push(this.selectdata[i].JPMID);
      }
      // let data = {
      //   entFULJPMs: dataArray
      // };
      data.entFULJPMs = dataArray;
      apiBase.DoService(
        data,
        apiBase.getApiAdress().JointRegistration.BatchCancel,
        res => {
          this.$message({
            type: "success",
            message: "注销成功!"
          });
          this.$refs.searchmessage.close();
          this.getData();
        }
      );
    },
    //获取当前部门名称
    getbmname() {
      let data = {};
      apiBase.DoService(
        data,
        apiBase.getApiAdress().JointRegistration.GetDpeName,
        res => {
          var s = res.data.content.DPTNAME;
          this.jpmData.JPMCANCELUNIT = s;
        }
      );
    },

    //查询条件重置
    btnRepeat() {
      this.selectDataEixend.JpmBussEquals = null;
      this.selectDataEixend.JpmNameEquals = null;
      this.selectDataEixend.JpmStatusEquals = this.IchValue;
      this.selectDataEixend.CremationdateGreaterAndEquals = new Date();
      this.selectDataEixend.CremationdateGreaterAndEquals.setDate(1);
      this.selectDataEixend.CremationdateLessAndEquals = new Date();
      this.getData();
    },
    //数据重置
    dataRepeat() {
      Object.assign(this.$data.regData, this.$options.data().regData);
      this.causList = [];
      this.ctyLists = [];
      // this.regDataTime = null;
      this.cauinfo = [];
    }
  },
  mounted() {
    // this.initSeachdata();
    this.selectDataEixend.JpmStatusEquals = this.IchValue;
  },
  components: {
    dataTable,
    sweetModal,
    informationRegistrationMain,
    printmodal,
    Appendixlists,
    OperationHistory
  },
  activated() {
    this.getData();
    for (let btn of this.$store.state.btnListCommon) {
      if (btn.BTNVALUE === ORDER.REGISTER) {
        btn.BTNSHOWNAME = "修改";
        break;
      }
    }
  },
  created() {
    this.selectDataEixend.CremationdateGreaterAndEquals = new Date();
    this.selectDataEixend.CremationdateGreaterAndEquals.setDate(1);
    this.selectDataEixend.CremationdateLessAndEquals = new Date();
    this.getColumns();
    this.checkAll = true 
    // this.getCode();
    // this.getCausa();
    // this.getBussType();
    // this.getHousehold();
  },
  watch: {}
};
</script>